import React, {FC, useEffect, useRef, useState} from "react";
import {useHistory} from 'react-router-dom';
import {setStore} from "@/plugins/cache";
import {get_Notes_lists} from "@/api";
import { Button, Checkbox, Form, type FormProps, Input,message,Spin } from 'antd';
import "./login.less"

type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
};




const Login: FC = (props: any) => {
    // 路由跳转
    const history = useHistory();
    // 消息提醒
    const [messageApi, contextHolder] = message.useMessage();
    // 全局加载中
    const [spinning, setSpinning] = React.useState<boolean>(false);

    const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
        console.log('Success:', values);
        setStore({
            name: 'token',
            content: Date.now()
        })
        setSpinning(true);
        setTimeout(() => {
            message.success("登入成功")
            setSpinning(false);
            history.replace('/home')
        },1500)

    };

    const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };


    return (
        <div className="adminLoginMain">
            <Spin spinning={spinning} fullscreen />
            {contextHolder}
            <div className="adminLoginDiv">
                <div className="adminLoginTitle">小洲博客终端</div>
                <Form
                    name="basic"
                    labelCol={{ span: 24 }}
                    wrapperCol={{ span: 24 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    layout="vertical"
                >
                    <Form.Item<FieldType>
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input id="user" />
                    </Form.Item>

                    <Form.Item<FieldType>
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input.Password id="psw" />
                    </Form.Item>

                    <Form.Item<FieldType>
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{ span: 16 }}
                    >
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>

                    <Form.Item wrapperCol={{  span: 24 }}>
                        <Button block type="primary" htmlType="submit">
                            进入
                        </Button>
                    </Form.Item>
                </Form>
            </div>

        </div>
    );
}

export default Login;
